<template>
    <div class="json-editor bg-white overflow-hidden bg-slate-800 rounded-md">
        <Splitpanes class="default-theme splitpanes_custom_theme">
            <Pane size="50" min-size="20">
                <div class="json_left_wrap w-full h-full ">
                    <el-input
                        v-model="jsonStr"
                        @input="changeJsonContentFn"
                        clearable
                        class="global_textarea_h_full w-full h-full"
                        type="textarea"
                        resize="none"
                        placeholder="请键入需要处理的json字符串"
                    />
                </div>
            </Pane>
            <Pane size="50" max-size="70" min-size="20">
                <div class="json_content w-full h-full flex flex-col text-slate-700  justify-center	items-center">
                    <div class="w-full bg-slate-50 border-b border-slate-300 p-2.5 flex items-center justify-end flex-row flex-nowrap justify-between">
                        <div class="flex items-center justify-end flex-row tracking-widest leading-4">
                            <client-only>
                                <div class="text-base leading-4">
                                    <el-tooltip>
                                        <template #content>
                                            <span>行号</span>
                                        </template>
                                        <el-icon :class="jsonConfig.showLineNumber ?'text-emerald-500':''"  @click="changeConfig('showLineNumber')"><ElIconMemo /></el-icon>
                                    </el-tooltip>
                                </div>
                                <div class="text-base leading-4 ml-3">
                                <el-tooltip>
                                    <template #content>
                                        <span>折叠</span>
                                    </template>
                                    <el-icon :class="jsonConfig.collapsedOnClickBrackets ?'text-emerald-500':''"  @click="changeConfig('collapsedOnClickBrackets')"><ElIconScaleToOriginal /></el-icon>
                                </el-tooltip>
                                </div>
                                <div class="text-base leading-4 ml-3">
                                    <el-tooltip>
                                        <template #content>
                                        <span>连接线</span>
                                        </template>
                                        <el-icon :class="jsonConfig.showLine ?'text-emerald-500':''"  @click="changeConfig('showLine')"><ElIconShare /></el-icon>
                                    </el-tooltip>
                                </div>
                                <div class="text-base leading-4 ml-3">
                                    <el-tooltip>
                                        <template #content>
                                        <span>闭合显示元素长度</span>
                                        </template>
                                        <el-icon :class="jsonConfig.showLength ?'text-emerald-500':''"  @click="changeConfig('showLength')"><ElIconDiscount /></el-icon>
                                    </el-tooltip>
                                </div>
                                <div class="text-base leading-4 ml-3">
                                    <el-tooltip>
                                        <template #content>
                                        <span>编辑</span>
                                        </template>
                                        <el-icon :class="jsonConfig.editable ?'text-emerald-500':''"  @click="changeConfig('editable')"><ElIconEdit /></el-icon>
                                    </el-tooltip>
                                </div>
                                <div class="text-base leading-4 ml-3">
                                <el-tooltip>
                                    <template #content>
                                        <span>清空</span>
                                    </template>
                                    <el-icon @click="clearContent"><ElIconDelete /></el-icon>
                                </el-tooltip>
                                </div>
                            </client-only>
                        </div>
                        <div class="flex items-center justify-end flex-row border-slate-300 border text-xs tracking-widest leading-4 rounded">
                            <span @click="compressJson(renderJsonStr,2)" class="flex items-center whitespace-nowrap p-1 border-solid cursor-pointer border-r border-slate-300">
                                <el-icon class="mr-1"><ElIconAim/></el-icon>
                                <span>格式化</span>
                            </span>
                            <span @click="compressJson(renderJsonStr)" class="flex items-center whitespace-nowrap p-1 border-solid cursor-pointer border-r border-slate-300">
                                <el-icon class="mr-1"><ElIconSwitchFilled /></el-icon>
                                <span>压缩</span>
                            </span>
                            <span @click="saveAsTxt" class="flex items-center whitespace-nowrap p-1 border-solid cursor-pointer border-r border-slate-300">
                                <el-icon class="mr-1"><ElIconDownload/></el-icon>
                                <span>保存</span>
                            </span>
                            <span @click="handleCopyBtnClick(jsonStr)" class="flex items-center whitespace-nowrap p-1 cursor-pointer">
                                <el-icon class="mr-1"><ElIconCopyDocument /></el-icon>
                                <span>复制</span>
                            </span>
                        </div>

                    </div>
                    <div class="w-full flex-1 h-0 scroll-smooth	overflow-y-auto">
                        <JsonPretty :render-json="renderJsonStr" @update:renderJson="val=>compressJson(val,2)" :config="jsonConfig" />
                    </div>
                </div>
            </Pane>
        </Splitpanes>
    </div>
</template>
<script lang="ts" setup>
import {Splitpanes,Pane}  from 'splitpanes'
import 'splitpanes/dist/splitpanes.css';
import {debounce} from 'lodash'
import json5 from 'json5'
import { useClipboard } from '@vueuse/core'
useHead({
    title: 'json格式化',
    meta: [
        { hid: 'og:title', property: 'og:title', content: '工具盒子、json工具' }, 
        { hid: 'keywords', name: 'keywords', content: '代码对比,代码对比工具,代码合并工具,在线代码对比工具,在线代码合并工具,代码差异对比,差异代码合并' }, 
        { hid: 'description', name: 'description', content: 'json格式化、压缩、保存、复制' },  
    ]
})


const renderJsonStr = ref({})
const jsonStr = ref("")
const jsonConfig:any = reactive({
    saveTime:1000
})

const changeConfig=(key:string)=>{
  jsonConfig[key] = !jsonConfig[key];
}

const compressJson = (target:any = null,space="") => {
    if (Object.keys(target).length === 0) {
        return
    }
    try {
        jsonStr.value = JSON.stringify(target, null, space)
    }catch(e){
        console.log(e)
    }
}

const updateJsonContent = (val:string) => {
  jsonStr.value = val
}

const saveAsTxt = () => {
  if (!renderJsonStr.value) return
  tools.saveTxt(JSON.stringify(renderJsonStr.value,null,''),`json_${new Date().getTime()}.txt`)
 }

const { copy } = useClipboard({ legacy: true })
function handleCopyBtnClick(text: string) {
  if (!text) {
    return ElMessage.error('请输入正确的复制内容！')
  }
  try {
    copy(text)
    ElMessage.success('复制成功')
  }
  catch (e) {
    console.log(e)
    ElMessage.error('复制失败')
  }
}

const formatterJson = ()=>{
  try {
    if(!jsonStr.value){
      renderJsonStr.value = {}
      return ;
    }
    renderJsonStr.value = json5.parse(jsonStr.value);
  } catch (error) {
    // ElMessage.error(`解析出错:${(error as any).message}`);
    throw(`解析出错:${(error as any).message}`);
    renderJsonStr.value = {}
  }
}

const changeJsonContentFn = debounce(formatterJson, jsonConfig.saveTime);

const clearContent=()=>{
    jsonStr.value = '';
    renderJsonStr.value = {}
}

</script>
<style lang="scss" scoped>
.json-editor {
    height: calc(100vh - var(--header-menu-height) - var(--footer-copyright-height));
    box-shadow:0px 0px 24px 0px rgba($color: #000000, $alpha: 0.1);
}
.json_left_wrap {
    :deep(.el-textarea__inner) {
        border-color: transparent !important;
        box-shadow: none !important;
        background-color: transparent !important;
        color: var(--text-custom-color);
        &:focus {
            outline: none;
            box-shadow: none;
            border-color: transparent !important;
            border: none;
        }
    }
}
.splitpanes {
    height: 100%;
}
</style>